<script setup>
import { onMounted, ref } from 'vue';
import { getSupplierList, addSupplier, updateSupplier, deleteSupplier, searcSupplier } from '@/apis/supplierAPI';
import { ElMessageBox, ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption } from 'element-plus';

const supplierlist = ref([]);
const getStatusText = (status) => {
  return status === 1 ? '启用' : '停用';
};
const keyword = ref('');

// 控制添加供应商弹出框显示隐藏
const dialogVisible = ref(false);
// 控制编辑供应商弹出框显示隐藏
const editDialogVisible = ref(false);
// 添加表单数据
const supplierForm = ref({
  supplierName: '',
  phone: '',
  address: '',
  status: 1 // 默认为启用
});
// 编辑表单数据
const editSupplierForm = ref({});
// 表单验证规则
const rules = {
  supplierName: [
    { required: true, message: '请输入供应商名称', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ]
};

const deletesupplier = async (id) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除该供应商吗？删除后不可恢复',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    await deleteSupplier(id);
    const response = await getSupplierList();
    supplierlist.value = response.data;
  } catch (error) {
    if (error === 'cancel') return;
    console.error('删除失败：', error);
  }
};

const handleSearch = async () => {
  try {
    const response = await searcSupplier(keyword.value);
    supplierlist.value = response.data;
  } catch (error) {
    console.error('搜索失败：', error);
  }
};

// 打开添加供应商弹出框
const openAddDialog = () => {
  supplierForm.value = {
    supplierName: '',
    phone: '',
    address: '',
    status: 1
  };
  dialogVisible.value = true;
};

// 提交添加供应商表单
const submitAddForm = async () => {
  try {
    await addSupplier(supplierForm.value);
    dialogVisible.value = false;
    const response = await getSupplierList();
    supplierlist.value = response.data;
    console.log('添加成功');
  } catch (error) {
    console.error('添加失败：', error);
  }
};

// 打开编辑供应商弹出框
const openEditDialog = (supplier) => {
  // 深拷贝避免直接修改原数据
  editSupplierForm.value = JSON.parse(JSON.stringify(supplier));
  editDialogVisible.value = true;
};

// 提交编辑供应商表单
const submitEditForm = async () => {
  try {
    await updateSupplier(editSupplierForm.value);
    editDialogVisible.value = false;
    const response = await getSupplierList();
    supplierlist.value = response.data;
    console.log('修改成功');
  } catch (error) {
    console.error('修改失败：', error);
  }
};

onMounted(async () => {
  const response = await getSupplierList();
  supplierlist.value = response.data;
  console.log(supplierlist.value);
});
</script>

<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    
    <div class="header-section">
      <h1>供应商管理</h1>
      <p>管理所有供应商的基本信息</p>
    </div>
    
    <div class="action-bar">
      <div class="search-group">
        <input 
          type="text" 
          placeholder="请输入名称或者电话号码（支持模糊查询）" 
          class="search-input"
          v-model="keyword"
        >
        <button class="search-btn" @click="handleSearch">搜索</button>
      </div>
      <div class="action-buttons">
        <button class="add-btn" @click="openAddDialog">添加供应商</button>
      </div>
    </div>
    
    <div class="card">
      <div class="filter-row">
        <div class="filter-item">
          <label>状态:</label>
          <select class="filter-select">
            <option value="">全部</option>
            <option value="active">启用</option>
            <option value="inactive">停用</option>
          </select>
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>供应商名称</th>
            <th>电话</th>
            <th>状态</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="supplier in supplierlist" :key="supplier.id">
            <td>{{supplier.supplierName}}</td>
            <td>{{supplier.phone}}</td>
            <td>{{getStatusText(supplier.status)}}</td>
            <td>{{supplier.address}}</td>
            <td class="action-buttons">
              <button class="btn-edit" @click="openEditDialog(supplier)">编辑</button>
              <button class="btn-delete" @click="deletesupplier(supplier.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加供应商弹出框 -->
    <el-dialog title="添加供应商" v-model="dialogVisible" width="500px">
      <el-form :model="supplierForm" :rules="rules" ref="supplierFormRef" label-width="120px">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="supplierForm.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="supplierForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="supplierForm.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="supplierForm.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑供应商弹出框 -->
    <el-dialog title="编辑供应商" v-model="editDialogVisible" width="500px">
      <el-form :model="editSupplierForm" :rules="rules" ref="editSupplierFormRef" label-width="120px">
        <el-form-item label="供应商ID" prop="id" style="display: none;">
          <el-input v-model="editSupplierForm.id"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="editSupplierForm.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editSupplierForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editSupplierForm.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editSupplierForm.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<script>
export default {
  name: 'SupplierManagement',
  methods: {
    goToHome() {
      this.$router.push('/home');
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-section {
  margin: 20px 0 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.header-section h1 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 24px;
}

.header-section p {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-group {
  display: flex;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 300px;
  font-size: 14px;
  border-right: none;
}

.search-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2980b9;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.add-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #2ecc71;
  color: white;
}

.add-btn:hover {
  background-color: #27ae60;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.filter-row {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  color: #34495e;
  font-size: 14px;
  font-weight: 500;
}

.filter-select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}

.data-table th {
  background-color: #f9f9f9;
  font-weight: 600;
  color: #34495e;
}

.data-table tbody tr:hover {
  background-color: #f9f9f9;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-edit, .btn-delete {
  padding: 4px 8px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-edit {
  background-color: #2ecc71;
  color: white;
}

.btn-delete {
  background-color: #e74c3c;
  color: white;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.icon-arrow-left::before {
  content: '←';
}
</style>
